<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .black{
            background-color: black;
        }
    </style>
    <script src="Itcast.core.js"></script>
    <script src="Itcast.dom.js"></script>
    <script src="Itcast.ctor.js"></script>
    <script src="Itcast.event.js"></script>
</head>

<body>
<input type="button" value="点击" id="btn"/>
</body>
<script>
    Itcast.fn.extend({
        css: function(name,value){
            if(value===undefined){
                if(typeof  name==="string"){
                    //获得对应的样式
                    return this [ 0 ].style[ name ] ||window.getComputedStyle(this[0])[name];//style只能获取行内样式

                }else{
                    //设置多个样式
                    return this.each(function(){
                        var that = this;
                        Itcast.each(name,function(k,v){
                            that.style[k] = v;
                        })
                    })
                }
            }else{
                //设置一个样式
                return this.each(function(){
                    this.style[name] = value;
                })
            }
        },
        addClass: function(name){
            return this.each(function(){
               if( this.className){
                   this.className +=' '+name;
               }else{
                   this.className =name;
               }
            })
        },
        removeClass: function(name){
            return this.each(function(){
                var names = this.className && this.className.split(' ') || [];
                var newNames = names.filter(function(v,i){
                    return v != name;
                });

                this.className = newNames.join(' ');

            });
        },
        hasClass: function( name ){
            //判断第0个元素是否含有
            var dom = this[0];
            var names = dom.className && dom.className.split(' ') || [];
            for(var i = 0;i<names.length;i++){
                if(names[i] == name){
                    return true;
                }
            }
            return false;
        },
        toggleClass: function(name){
            return this.each(function(){
                var iObj = Itcast(this);
                if(iObj.hasClass(name)){
                    iObj.removeClass(name);
                }else{
                    iObj.addClass(name);
                }
            })
        },
        attr: function(name,value){
            if(value === undefined){
                return this[0].getAttribute(name);
            }else{
                return this.each(function(){
                    this.setAttribute(name,value);
                })
            }
        },
        prop: function(name,value){
            if(value===undefined){
                return this[0][name];
            }else{
                return this.each(function(){
                    this[name] = value;
                })
            }
        },

    });
    Itcast.each({
        html: 'innerHTML',
        text: 'innerText',
        val: 'value'
    },function(k,v){
        Itcast.fn[k] = function(value){
            if(value === undefined){
                return this[0][v];
            }else{
                return this.each(function(){
                    this.v =value;
                })
            }
        }
    })

    I("#btn").click(function(){
        I("body").toggleClass('black');
    })
    I("<div>2132</div>").appendTo("body").addClass('c1 c2 c3 c1').removeClass('c1');
</script>
</html>